import React, { useState, useEffect, forwardRef } from 'react';
import { Table, Button, Modal, Flex } from 'antd';
import type { TableColumnsType, TableProps } from 'antd';
import { getGroup, updateGroup_ok, updateGroup_no } from '../../../request/api'
import { useDispatch, useSelector } from 'react-redux';
import './stock.css'
import { setStoreList, setTableCheck } from '../../../store/module/store';


const App: React.FC = (props, ref) => {
  const dispatch = useDispatch()


  interface DataType {
    name: String,//团长姓名
    phone: String,//联系方式
    pick_name: String,//自提点名称
    pick_address: String,//自提点地址
    pick_type: String,//自提点类型
    examine_name: String,//审核人
    examine_type: String,//审核状态
    examine_time: String,//审核时间
    void_text: String,//作废理由
    deal_price: Number,//成交金额
    deal_num: Number,//成交数量
    statue: String,//状态
    label: String,//标签
  }


  const columns: TableColumnsType<DataType> = [
    { title: 'ID', dataIndex: 'key', },
    { title: '申请时间', dataIndex: 'examine_time', },
    { title: '姓名', dataIndex: 'name', },
    { title: '手机号', dataIndex: 'phone', },
    { title: '自提点名称', dataIndex: 'pick_name', },
    { title: '自提点地址', dataIndex: 'pick_address', },
    { title: '自提点类型', dataIndex: 'pick_type', },
    {
      title: '操作', dataIndex: '',
      render: (text: string) =>
        <p>
          <a onClick={() => { showModalLook(text) }}>查看 </a>
          <a onClick={() => { group_ok(text.key) }}>通过 </a>
          <a onClick={() => { showModal(text.key) }}>作废 </a></p>,
    },
  ];
  //选中的行
  const rowSelection: TableProps<DataType>['rowSelection'] = { // 定义表格的行选择
    onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
      // console.log(`选中行key: ${selectedRowKeys}`, '选中行数据: ', selectedRows);
     dispatch(setTableCheck(selectedRowKeys))     
    },
  };

  const [group_list, setGroup_list] = useState([])
  const [group_label, setGroup_label] = useState([])
  const [box, setBox] = useState<any>({})


  useEffect(() => {
    get_group();
  }, [])


  //获取分组列表
  const get_group = async () => {
    // setGroup_list(groupList.filter(item => item.examine_type === '审核中'))
    // setGroup_label(group_label)
  }

  const dataSource = group_list.map((item: any) => ({
    key: item._id,
    ID: item.key,
    name: item.name,//团长姓名
    phone: item.phone,//联系方式
    pick_name: item.pick_name,//自提点名称
    pick_address: item.pick_address,//自提点地址
    pick_type: item.pick_type,//自提点类型
    examine_name: item.examine_name,//审核人
    examine_type: item.examine_type,//审核状态
    examine_time: item.examine_time,//审核时间
    void_text: item.void_text,//作废理由
    deal_price: item.deal_price,//成交金额
    deal_num: item.deal_num,//成交数量
    statue: item.statue,//状态
    label: item.label,//标签
    wx_name: item.wx_name,//授权微信昵称
    store_statue: item.store_statue,//是否有门店
    coordinate: item.coordinate,//坐标
    door_number: item.door_number,//门牌号
    start_time: item.start_time,//营业开始时间
    end_time: item.end_time,//营业结束时间
    business_img: item.business_img,//营业执照
    pick_img: item.pick_img,//自提点图片
    phone_spare: item.phone_spare,//备用电话
    user_img: item.user_img,//身份信息
  }))

  //修改为未通过的对话框
  const [modal_text, setModalText] = useState('');
  //对话框
  const [isModalOpen, setIsModalOpen] = useState(false);
  //选中行id
  const showModal = (id: String) => {
    setID(id)
    setIsModalOpen(true);
  };
  //取消
  const handleOk = () => {
    setIsModalOpen(false);
    setID('')
    setModalText('')
  };

  //确定作废
  const handleCancel = () => {
    if (modal_text === '') {
      return alert('请输入作废理由')
    } else {
      get_group()
      setIsModalOpen(false);
      group_no()
      setID('')
      setModalText('')
      setGroup_label(group_label)
      setIsModalOpenLook(false)
    }
  };


  //取消
  const handleCancel_no = () => {
    setIsModalOpen(false);
  }

  //选中的id
  const [ID, setID] = useState<String>('')

  //修改状态通过
  const group_ok = async (id: any) => {
    const res = await updateGroup_ok({ id: id, user: localStorage.getItem('user') })
    if (res.code === 200) {
      alert('修改成功')
      get_group()
      setIsModalOpenLook(false)
    }
  }

  //修改状态未通过
  const group_no = async () => {
    const res = await updateGroup_no({ id: ID, text: modal_text, user: localStorage.getItem('user') })
    if (res.data.code === 200) {
      get_group()
      setIsModalOpenLook(false)
    }
  }

  //查看数据的对话框
  const [isModalOpenLook, setIsModalOpenLook] = useState(false);

  const showModalLook = (box: any) => {
    setBox(box)
    setID(box.key)
    setIsModalOpenLook(true);
  };

  const handleOkLook = () => {
    setIsModalOpenLook(false);
  };

  const handleCancelLook = () => {
    setIsModalOpenLook(false);
  };

  return (
    <div>
      <Table<DataType>
        rowSelection={{ type: 'checkbox', ...rowSelection }}
        columns={columns}
        dataSource={dataSource}
      />

      <div>
        <Modal title="作废原因" open={isModalOpen} onOk={handleOk} style={{ top: '4rem' }}
          onCancel={handleCancel_no}
          footer={[
            <Button key="submit" onClick={handleOk}>
              取消
            </Button>,
            <Button key="back" type="primary" onClick={handleCancel}>
              确定
            </Button>
          ]
          }>
          <div className='modal_all'>
            <p className={modal_text == '用户主动要求' ? 'modal_p' : ''} onClick={() => {
              setModalText('用户主动要求')
            }}>用户主动要求</p>
            <p className={modal_text == '信息填写错误' ? 'modal_p' : ''} onClick={() => {
              setModalText('信息填写错误')
            }}>信息填写错误</p>
            <p className={modal_text == '恶意注册' ? 'modal_p' : ''} onClick={() => {
              setModalText('恶意注册')
            }}>恶意注册</p>
            <input type="text" value={modal_text} placeholder='手动填写原因'
              onChange={(e) => { setModalText(e.target.value) }}
            />
          </div>
        </Modal>
      </div>
      {/* 查看团长信息 */}
      <div>
        <Modal title="查看申请" open={isModalOpenLook} onOk={handleOkLook} onCancel={handleCancelLook}
          style={{ top: '.5rem' }}
          width={'17.5rem'}
          footer={[
            <Button key="back" type="primary" onClick={handleOkLook}>
              确定
            </Button>
          ]
          }
        >
          <div className='modal_look'>
            <p style={{ padding: '0.2rem' }}>申请信息</p>
            <div className='modal_look_text'>
              <p>申请ID:{box.key}</p>
              <p>授权微信信息:{box.wx_name}</p>
              <p>申请时间:{box.examine_time}</p>
            </div>
            <p style={{ padding: '0.2rem' }}>自提点位置</p>
            <div className='modal_look_text'>
              <p>是否有门店:{box.store_statue ? '是' : '否'}</p>
              <p>自提点名称:{box.pick_name}</p>
              <p>自提点地址:{box.pick_address}</p>
              <p>坐标:{box.coordinate}</p>
              <p>门牌号:{box.door_number}</p>
            </div>
            <p style={{ padding: '0.2rem' }}>自提点信息</p>
            <div className='modal_look_text'>
              <p>自提点类型:{box.pick_type}</p>
              <p>开始营业时间:{box.start_time}</p>
              <p>结束营业时间:{box.end_time}</p>
              <div style={{
                padding: '0.3rem',
                width: '96%',
                backgroundColor: 'white',
                marginTop: '0.05rem',
                display: 'flex'
              }}>
                营业执照:<img src={box.business_img}
                  style={{ width: '2.7rem', height: '2.7rem', marginLeft: '0.3rem' }} />
              </div>
            </div>
            <div className='modal_look_text'>
              <div style={{
                padding: '0.3rem',
                width: '96%',
                backgroundColor: 'white',
                marginTop: '0.05rem',
                display: 'flex'
              }}>
                自提点照片:<img src={box.pick_img}
                  style={{ width: '2.7rem', height: '2.7rem', marginLeft: '0.3rem' }} />
              </div>
            </div>
            <p style={{ padding: '0.2rem' }}>团长信息</p>
            <div className='modal_look_text'>
              <p>团长姓名:{box.name}</p>
              <p>手机号码:{box.phone}</p>
              <p>备用号码:{box.key}</p>
            </div>
            <div className='modal_look_text'>
              <div style={{
                padding: '0.3rem',
                width: '96%',
                backgroundColor: 'white',
                marginTop: '0.05rem',
                display: 'flex'
              }}>
                身份证信息:
                {(box.user_img == undefined ? [] : box.user_img).map((item: string, index: number) => {
                  return <img src={item} key={item}
                    style={{ width: '2.7rem', height: '2.7rem', marginLeft: '0.3rem' }} />
                })
                }
              </div>
            </div>
          </div>

        </Modal>
      </div>
    </div >
  );
};

export default App;

